<template>
  <div id='publish'>
    <div class='title'>
      <v-title></v-title>
      <van-form>
        <van-field readonly
          v-model='type_name'
          clickable label="类型"
          placeholder="选择类型"
          @click="flag = true" />
        <van-popup round
          v-model:show="flag"
          position="bottom">
          <van-picker
            title="标题"
            :show-toolbar="true"
            :columns='listType'
            value-key='tname'
            @cancel="flag = false"
            @confirm="onConfirm"
            @change="onChange" />
        </van-popup>
        <van-field name="价格"
          label="价格"
          v-model="price"
          placeholder="价格"
          :rules="[{ required: true, message: '请填写价格',pattern  }]" />

        <van-field
          v-model="detail"
          rows="2" autosize
          label="详情"
          type="textarea"
          maxlength="50"
          placeholder="请输入详情"
          show-word-limit />

        <van-field readonly
          clickable
          v-model="Dateshow"
          name="calendar"
          label="截止日期"
          placeholder="点击选择日期"
          @click="Dateflag = true" />
        <van-calendar
          v-model:show="Dateflag"
          color='rgba(26, 144, 255, 0.8)'
          @confirm="DateConfirm" />

        <van-field
          v-model="Timeshow"
          readonly clickable
          name="datetimePicker"
          label="截至时间"
          placeholder="点击选择时间"
          @click="Timeflag = true" />
        <van-popup
          v-model:show="Timeflag"
          position="bottom">
          <van-datetime-picker
            type="time"
            @confirm="TimeConfirm"
            @cancel="Timeflag = false" />
        </van-popup>

        <van-field name="file"
          label="图片上传">
          <template #input>
            <van-uploader
              multiple
              max-count="3"
              name='file'
              v-model="imglist" />
          </template>
        </van-field>

        <div
          style="margin: 16px;">
          <van-button round
            block
            type='sumbit'
            @touchstart='publish'
            native-type="submit"
            color='rgba(26, 144, 255, 0.8)'>
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import title from './title'
import { Form, Notify, Toast, Dialog } from 'vant'
import time from '../../JS/time'
export default {
  name: 'publish',
  data() {
    return {
      flag: false,
      tid: undefined,
      type_name: '',
      listType: [],
      price: '',
      detail: '',
      imglist: [],
      Dateshow: '',
      Timeshow: '',

      Timeflag: false,
      Dateflag: false,
      DateLimit: '',
      TimeLimit: '',
      pattern: /\d/,
      imgId: '',
      Time: '',
    }
  },
  props: {},
  components: {
    'v-title': title,
    [Notify.Component.name]: Notify.Component,
    [Dialog.Component.name]: Dialog.Component,
  },
  computed: {},
  watch: {},
  created() {
    this.listType = this.$store.state.listType
  },
  mounted() {},
  methods: {
    onConfirm(value) {
      this.type_name = value.tname
      this.tid = value.tid
      this.flag = false
    },
    TimeConfirm(date) {
      this.Timeshow = date
      this.Timeflag = false
      let arr = this.Timeshow.split(':')
      let time = 0
      time = arr[0] * 3600 * 1000 + arr[1] * 60 * 1000
      this.TimeLimit = time
    },
    DateConfirm(date) {
      this.Dateshow = `${date.getMonth() + 1}/${date.getDate()}`
      let time = new Date(date)
      this.DateLimit =
        time.getTime() -
        time.getHours() * 3600 * 1000 -
        time.getMinutes() * 60 * 1000 -
        time.getSeconds() * 1000 -
        time.getMilliseconds()

      // this.DateLimit =
      this.Dateflag = false
    },
    onChange(value, index) {
      Toast({
        message: `当前值: ${index.tname}`,
        duration: 800,
      })
    },
    onCancel() {
      Toast('取消')
    },
    publish() {
      this.Time = this.TimeLimit + this.DateLimit
      if (this.Time) {
        let time = new Date().getTime() - 0 + 4 * 3600 * 1000
        if (time > this.Time) {
          Dialog.alert({
            message: ' 当前时间已经过期,请发布在当前时间的四小时以后',
            confirmButtonColor: 'rgba(26, 144, 255)',
          }).then(() => {
            this.Timeshow = ''
            this.Dateshow = ''
          })
        } else {
          if (this.tid && this.price && this.TimeLimit && this.detail) {
            Dialog.confirm({
              message: ' 确认发布',
              confirmButtonColor: 'rgba(26, 144, 255)',
            }).then(() => {
              this.http({
                method: 'post',
                url: '/api/newMission',
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded',
                },
                params: {
                  uid: window.localStorage.getItem('uid'),
                  token: window.localStorage.getItem('token'),
                  tid: this.tid,
                  detail: this.detail,
                  price: this.price,
                  timeLimit: this.Time,
                },
              }).then((res) => {
                if (res.data.status == 0) {
                  this.imglist.forEach((v, k) => {
                    var imgFile = new FormData()
                    imgFile.append('file', v.file)
                    imgFile.append('uid', window.localStorage.uid)
                    imgFile.append('token', window.localStorage.token)
                    imgFile.append('mid', res.data.data.mid)
                    this.http({
                      method: 'post',
                      url: '/api/newImage',
                      headers: {
                        'Content-Type': 'multipart/form-data',
                      },
                      data: imgFile,
                    }).then((res) => {})
                  })
                  Toast({
                    type: 'primary',
                    message: '发布成功',
                    duration: 800,
                    background: 'rgba(26, 144, 255, 0.8)',
                  })
                  this.$router.replace('/myinfo/info')
                }
                if (res.data.status == 1) {
                  Toast({
                    type: 'warning',
                    message: res.data.msg,
                    duration: 800,
                    background: 'rgba(26, 144, 255, 0.8)',
                  })
                  this.$router.replace('/myinfo/info')
                }
              })
            })
          } else {
            Dialog.alert({
              message: ' 请填写完整信息 ',
              confirmButtonColor: 'rgba(26, 144, 255)',
            })
          }
        }
      }
    },
  },
}
</script>

<style scoped lang='less'>
</style>
